<template>
  <i class="lwq-icon" :class="{[`lwq-icon--${type}`]: type}" :style="customStyles" v-bind="$attrs">
    <font-awesome-icon v-bind="filterProps"></font-awesome-icon>
  </i>
</template>
<script setup lang="ts">
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { omit } from "lodash-es";
import type { IconProps } from "./types";
import { computed } from "vue";
defineOptions({
  name: 'LwqIcon',
  inheritAttrs: false
});
const props = defineProps<IconProps>();
// 把fortawesome自己的属性过滤掉，使用我们自定义的属性
// props可能会异步改变，这里的只会初始执行一次，所以要使用computed进行监听
const filterProps = computed(() => omit(props, ['type', 'color']));
const customStyles = computed(() => {
  return props.color ? {color: props.color} : {}
})
</script>
<style scoped>
@import './style.css';
</style>